<template>
  <span :style="{ width: width + 'px', height: width + 'px'}" class="icon">
    <img :src="getImage()" :style="{fit: cover,width: width + 'px', height: width + 'px'}"/>
  </span>
</template>

<script setup>
import {getCurrentInstance, ref, watch} from "vue";
const { proxy } = getCurrentInstance();
const props = defineProps({
  fileType: {
    type: Number,
  },
  iconName: {
    type: String,
  },
  cover: {
    type: String,
  },
  width: {
    type: Number,
    default: 32,
  },
  fit: {
    type:String,
    default: "cover",
  }
});

const fileTypeMap = {
  0:{desc: "目录",icon: "folder"},
  1:{desc: "视频",icon: "video"},
  2:{desc: "音频",icon: "music"},
  3:{desc: "图片",icon: "image"},
  4:{desc: "exe",icon: "pdf"},
  5:{desc: "doc",icon: "word"},
  6:{desc: "excel",icon: "excel"},
  7:{desc: "纯文本",icon: "txt"},
  8:{desc: "程序",icon: "code"},
  9:{desc: "压缩包",icon: "zip"},
  10:{desc: "其他文件",icon: "others"},
}

const getImage=()=>{
  if (props.cover){
    return proxy.globalInfo.imageUrl + props.cover;
  }
  let icon = "unknown _icon";
  if (props.iconName){
      icon = props.iconName;
  }else {
    const iconMap = fileTypeMap[props.fileType]
    if (iconMap!=undefined){
      icon = iconMap["icon"];
    }
  }
  return new URL(`/src/assets/icon-image/${icon}.png`,import.meta.url).href;
}
</script>
<style>
.icon{
  text-align: center;
  display: inline-block;
  border-radius: 3px;
  overflow: hidden;
}
</style>